<template>
	<el-menu :default-active="active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect"
	 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse" router
	 :default-openeds="openeds">
		<el-menu-item index="-1" disabled>
			<img src="@/assets/svg/logo.svg" alt="" height="20px" style="margin-right: 10px;">
			<span slot="title">名称</span>
		</el-menu-item>
		<el-scrollbar style="height: 100%; width: 100%;">
			<el-submenu :index='index.toString()' v-for="(item, index) in menuList" :key="index" :class="isCollapse ? 'isCollapse':''">
				<template slot="title">
					<i :class="item.menuIcon"></i>
					<span slot="title" v-if="!isCollapse">{{item.label}}</span>
					<span class="red_point1" v-if="item.label=='商家管理' && (afterSaleNum+bottomSheetNum+adviceNum)>0"></span>
					<span class="red_point1" v-if="item.label=='财务管理' && (withdrawalsSaleNum>0 || busWithdrawalsSaleNum>0)"></span>
				</template>
				<el-menu-item :index="item2.requestUrl" v-for="(item2, index) in item.children" :key="index">
					{{item2.label}}
					<span class="red_point" v-if="item2.requestUrl=='/user/after_sale' && afterSaleNum>0">{{afterSaleNum}}</span>
					<span class="red_point" v-if="item2.requestUrl=='/user/bus_bottom_sheet' && bottomSheetNum>0">{{bottomSheetNum}}</span>
					<span class="red_point" v-if="item2.requestUrl=='/user/advice' && adviceNum>0">{{adviceNum}}</span>
					<span class="red_point" v-if="item2.requestUrl=='/finance/withdrawal_list' && withdrawalsSaleNum>0">{{withdrawalsSaleNum}}</span>
					<span class="red_point" v-if="item2.requestUrl=='/finance/bus_withdrawal_list' && busWithdrawalsSaleNum>0">{{busWithdrawalsSaleNum}}</span>
				</el-menu-item>
			</el-submenu>
		</el-scrollbar>
	</el-menu>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: false,
				active: '',
				openeds: [],
				menuList: [],

				afterSaleNum:0,
				bottomSheetNum:0,
				adviceNum:0,
				withdrawalsSaleNum:0,
				busWithdrawalsSaleNum:0,
			};
		},

		watch: {
			router(value) {
				this.active = this.$route.path
				this.setByRoute()
			}
		},

		computed: {
			router() {
				return this.$route.path
			}
		},

		created() {
			this.defaultActiveIndex = this.$route.fullPath

			var item = JSON.parse(sessionStorage.getItem('menuList'));
			// 获取所有根节点
			var parents = [];
			item.filter(item => {
				return item.parentId == -1
			}).forEach(item => {
				parents.push({
					id: item.id,
					label: item.menuName,
					requestUrl: item.requestUrl,
					menuIcon: item.menuIcon
				})
			})
			// 获取所有子节点
			var childrens = [];
			item.filter(item => {
				return item.parentId != -1 && item.flag == 1
			}).forEach(item => {
				childrens.push({
					id: item.id,
					label: item.menuName,
					parentId: item.parentId,
					requestUrl: item.requestUrl,
					menuIcon: item.menuIcon
				})
			})

			// 生成菜单树
			this.menuList = this.$common.translator(parents, childrens, current => {
				// 定义树的数据结构
				return {
					id: current.id,
					label: current.label,
					parentId: current.parentId,
					requestUrl: current.requestUrl,
					menuIcon: current.menuIcon
				}
			});

			this.unCount();
		},

		mounted() {
			this.$pubsub.subscribe('collapse', (msg, value) => {
				this.isCollapse = value
			})

			this.active = this.$route.path

			setTimeout(() => {
				this.setByRoute()
			}, 200)

		},

		methods: {
			unCount(){
                this.$request.post({
                    url: '/ReportApi/admin/uncount',
                    params: {},
                    success: result =>{
                        this.afterSaleNum = result.afterSaleNum;
                        this.bottomSheetNum = result.bottomSheetNum;
                        this.adviceNum = result.adviceNum;
                        this.withdrawalsSaleNum = result.withdrawalsSaleNum;
                        this.busWithdrawalsSaleNum = result.busWithdrawalsSaleNum;
                    },
                    finally: ()=>{
                    }
                })
            },

			handleOpen(key, keyPath) {},

			handleClose(key, keyPath) {},

			handleSelect(index, path) {
				if (!this.menuList[Number(path[0])]) {
					return;
				}
				var children = this.menuList[Number(path[0])].children[
					this.menuList[Number(path[0])].children.findIndex(item => {
						return item.requestUrl == path[1]
					})
				]

				var menuItem = this.menuList[Number(path[0])]

				this.$pubsub.publish('breadcrumb', [{
					name: menuItem.label
				}, {
					name: children.label
				}])

				this.$pubsub.publish('addTabs', {
					parentLabel: menuItem.label,
					path: children.requestUrl,
					label: children.label
				})
			},

			setByRoute() {
				var i = -1
				var j = -1
				this.menuList.forEach((item, index) => {
					if (item.children) {
						item.children.forEach((item2, index2) => {
							if (item2.requestUrl == this.active) {
								i = index
								j = index2
							}
						})
					}
				})
				this.handleSelect(this.active, [i.toString(), this.active])
			}
		}

	}
</script>

<style>
	.el-menu{
		
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 210px;
		box-sizing: border-box;
	}

	.el-menu-vertical-demo.el-menu {
		height: 100vh;
		border-right: 0px !important;
	}

	.el-menu--inline .el-menu-item {
		background-color: #1f2d3d !important;
	}

	.el-menu--inline .el-menu-item:hover {
		background-color: black !important;
	}

	.el-menu-item.is-disabled {
		opacity: 1 !important;
		cursor: default;
		background: transparent !important;
	}

	.el-submenu__title {
		display: flex;
		align-items: center;
	}

	.el-submenu__title i {
		color: #d1d5dd;
		vertical-align: middle;
		margin-right: 5px;
		width: 24px;
		text-align: center;
		font-size: 18px;
	}

	.el-menu .el-scrollbar__wrap {
		overflow-x: hidden;
	}

	.el-submenu__title {
		height: 48px !important;
		line-height: 48px !important;
	}
	
	.el-submenu .el-menu-item{
		height: 43px !important;
		line-height: 43px !important;
	}

	.el-submenu .red_point1{
		background-color: #f56c6c;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-left: 5px;
	}
	.el-submenu .el-menu-item .red_point{
		background-color: #f56c6c;
		border-radius: 10px;
		color: #fff;
		display: inline-block;
		font-size: 12px;
		height: 18px;
		line-height: 18px;
		padding: 0 6px;
		text-align: center;
		white-space: nowrap;
		margin-left: 5px;
	}
	
	.isCollapse .el-submenu__icon-arrow.el-icon-arrow-right{
		display: none;
	}
	
	.el-menu .el-scrollbar__view{
		padding-bottom: 55px;
	}
</style>

<style scoped>

</style>
